<template>
  <div class="history">
    <div class="history_header">
      <van-nav-bar title="历史记录" left-arrow :fixed="true">
        <template #right>
          <van-icon name="search" size="20" @click="$router.push('/search')" />
          <span style="font-size: 12px; color: #gray; margin-left: 15px"
            >管理</span
          >
        </template>
        <template #left>
          <van-icon name="arrow-left" size="18" @click="$router.push('/my')" />
        </template>
      </van-nav-bar>
    </div>

    <div class="history_content">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="Historys"
      >
        <ArticeleInfo
          v-for="item in history"
          :time="item.time"
          :img="item.imageSrc"
          :amcount="item.comment"
          :title="item.title"
          :key="item.id"
          :author="item.author"
          :id="item._id"
        ></ArticeleInfo>
      </van-list>
    </div>
  </div>
</template>

<script>
import { getHistory } from "@/api/api";
import ArticeleInfo from "@/views/home/ArticeleInfo.vue";
export default {
  name: "History",
  components: {
    ArticeleInfo,
  },
  data() {
    return {
      skip: 0,
      limit: 10,
      history: [],
      loading: false,
      finished: false,
    };
  },
  methods: {
    Historys() {
      let { uid } = localStorage;
      let { skip, limit } = this;
      getHistory(uid, skip, limit).then((res) => {
        if (res.data.code == 0) {
          let len = this.history.length;
          if (len >= res.data.count) {
            this.finished = true;
          } else {
            this.loading = false;
            this.history.push(...res.data.data);
          }
        }
        // console.log(this.history);
      });
    },
  }
};
</script>

<style lang="less" scoped>
.van-nav-bar .van-icon {
  color: #000;
}

.history {
  .history_content {
    margin-top: 55px;
  }
}
</style>
